﻿ 
<script>
    $.ajaxSetup({
        async: false
    }); 
    $(function () {
        GetProvince();
        $("#province").change(function () { GetCity(); });
        $("#city1").change(function () { GetCounty(); });
        onloadcity();
    });
    function onloadcity() { 
        $('#province').val($("#Province").val()).trigger('change');
        $('#city1').val($("#City").val()).trigger('change');
        $('#city2').val($("#Region").val());
        
        $("#provincediv").ruleSingleSelect();
        $("#city1div").ruleSingleSelect();
        $("#city2div").ruleSingleSelect();
    }
    function GetProvince() {
        $.getJSON("@Url.Action("GetProvince", "Area", new { area = "" })", function (data) {
            $.each(data, function (index, row) {
                var template = $('#ProvinceTemp').html(); //获取模版的html
                var bookData = Mustache.render(template, row);//把每行的数据填充到模版得到html内容
                $("#province").append(bookData);
              
            });
         
        }); 
        GetCity();
    }
    function GetCity() {
        $("#city1").empty();
        $.getJSON("@Url.Action("GetCity", "Area", new { area = "" })/" + $("#province").val() + "", function (data) { 
            $.each(data, function (index, row) {
                var template = $('#CityTemp').html(); //获取模版的html
                var bookData = Mustache.render(template, row);//把每行的数据填充到模版得到html内容
                $("#city1").append(bookData);
             
            });
         
        });
        GetCounty();
    }
    function GetCounty() { 
        $("#city2").empty();
        $.getJSON("@Url.Action("GetCounty", "Area", new { area = "" })/" + $("#city1").val() + "", function (data) { 
            $.each(data, function (index, row) {
                var template = $('#CountyTemp').html(); //获取模版的html
                var bookData = Mustache.render(template, row);//把每行的数据填充到模版得到html内容
                $("#city2").append(bookData);
             
            });
            
       
        });
    }
</script>
@*<div class="rule-single-select">
    <select id="slect12345">
        <option>中国</option>
    </select>
</div>*@

<table style="line-height:50px;">
    <tr>
        <td>
            <div id="provincediv"  >
    <select id="province">
    </select>
</div>
        </td>
        <td>
            <div id="city1div" class="rule-single-select">
    <select id="city1">
    </select>
</div>
        </td>
          <td>
            <div id="city2div">
    <select id="city2">
    </select>
</div>
        </td>
    </tr>
</table>



<script type="text/template" id="ProvinceTemp">
    <option value="{{ProvinceName}}">{{ProvinceName}}</option>
</script>
<script type="text/template" id="CityTemp">
    <option value="{{CityName}}">{{CityName}}</option>
</script>
<script type="text/template" id="CountyTemp">
    <option value="{{CountyName}}">{{CountyName}}</option>
</script>
